import { globalStyle } from '@vanilla-extract/css';
import { vars } from './vars.css';
import { brighten, fallBackGlobalStyle, modifyHSLColorLightness } from './tools';
import { lightColor } from './colors/colorLight.css';
import { darkColor } from './colors/colorDark.css';

globalStyle('hr', {
	border: 'none',
	borderBottom: `1px solid ${brighten(vars.color.border, 0.2)}`,
	height: 0,
	width: '100%',
	boxSizing: 'border-box',
});

fallBackGlobalStyle(
	'hr',
	{
		borderBottom: `1px solid ${modifyHSLColorLightness(lightColor.color.border, 0.2)}`,
	},
	{
		borderBottom: `1px solid ${modifyHSLColorLightness(darkColor.color.border, -0.2)}`,
	}
);

globalStyle('hr.dotted', {
	borderBottom: `2px dotted ${vars.color.border}`,
});

globalStyle('hr.dashed', {
	borderBottom: `2px dashed ${vars.color.border}`,
});

globalStyle('hr.double', {
	borderBottom: `3px double ${vars.color.border}`,
});
